<template>
  <div>
    <van-nav-bar
       title="登录"
    />
    <div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="user.mobile"
          required
          name="mobile"
          label="手机号"
          placeholder="请输入11位手机号"
          :rules="[{ required: true, message: '请填写用户名',
          pattern: /^1[3-9]\d{9}$/ }]"
        />
        <van-field
          v-model="user.code"
          required
          type="password"
          name="code"
          label="密码"
          placeholder="请输入6位密码"
          :rules="[{ required: true, message: '请填写密码',
        }]"
        />
        <div style="margin: 16px;">
           <van-button round block type="info" native-type="submit"
           :diabled="isLoding"
           :loading="isLoding"
           loading-text="登录中..."
           >登录</van-button>
        </div>
      </van-form>
    </div>
  </div>

</template>

<script>
  import { loginAPI } from '@/api'
  import { Notify } from 'vant';
  export default {
    data() {
      return {
        user: {
          mobile: '',
          code: ''
        },
        isLoding: false
      };
    },
    methods: {
      async onSubmit(values) {
        console.log('submit', values);
        this.isLoding = true

        try {
          const res = await loginAPI(this.user)
          console.log(res);
          Notify({ type: 'success', message: '登录成功' });
          this.$router.replace({
            path: '/tabbar/List'
          })
        } catch (err) {
          Notify({ type: 'danger', message: '账号或密码错误' });

        }
        this.isLoding = false
      },
    },
   
  }

</script>

<style scoped lang="less">
  .van-nav-bar {
    background-color: blue;
  }
  /deep/ .van-nav-bar__title {
    color: aliceblue;
  }

</style>